<template>
    <div class="notice">
        <!-- search -->
        <div class="search">
            <div @click="inputFocus" class="searchInput"></div>
            <i class="search-icon"></i>
            <span class="searchPlaceHolder">搜索</span>
        </div>
        <mTitle :title="title"></mTitle>
        <scroll :data="hotspotList" class="notice-wrapper" :pullup="pullup" @scrollToEnd="searchMore">
            <div>
                <ul class="notice-item">
                    <router-link :to="'/detailNews/' + item.id" v-for="(item, index) in hotspotList" :key="item.id" tag="li">
                        <div class="left">
                            <img class="notice-img" v-lazy="item.coverimg" />
                        </div>
                        <div class="right">
                            <h3>{{item.title}}</h3>
                            <span class="notice-date">{{item.pubdate}}</span>
                            <p class="notice-desc">{{item.content.substr(0,36)}}...</p>
                        </div>
                    </router-link>
                    <loading v-show="!hasMore"></loading>
                    <li class="bottom-text" v-show="endMore">已加载全部数据</li>
                </ul>
            </div>
            <!-- 请求数据loading -->
            <div class="loading-wrapper" v-show="!hotspotList.length">
                <loading></loading>
            </div>
        </scroll>
        <!-- 底部 -->
        <div class="notice-fixed">
            <router-link to="/news" class="notice-fixed-item" replace>
                <i class="icon icon-item1"></i>
                <span class="desc">新闻动态</span>
            </router-link>
            <router-link to="/notice" class="notice-fixed-item active" replace>
                <i class="icon icon-item2"></i>
                <span class="desc">通知公告</span>
            </router-link>
        </div>
        <search ref="searchFlag" :total="total"></search>
    </div>
</template>

<script>
    import axios from 'axios'
    import mTitle from 'base/title/title'
    import Scroll from 'base/scroll/scroll'
    import Loading from 'base/loading/loading'
    import Search from 'pages/notice/components/search/search'
    export default {
        data () {
            return {
                title: "通知公告",
                hasMore: true,
                endMore: false,
                pullup: true,
                hotspotList: [],
                num: 1,
                size: 10,
                total: 0
            }
        },
        methods: {
            // 获取焦点
            inputFocus () {
                this.$refs.searchFlag.show()
            },
            // 加载数据
            getHotSpotInfo () {
                axios.get('/api/index.php?g=Api&m=Guanwang&a=gonggao&page='+ this.num +'&size=' + this.size +'').then((res) => {
                    res = res.data
                    this.total = Number(res.total)
                    this.hasMore = false
                    this.hotspotList = res.list
                    if (this.total < 10) {
                        this.hasMore = true
                        this.endMore = true
                        return
                    }
                })
            },
            // 下拉加载
            searchMore () {
                if (this.total < 10) {
                    this.hasMore = true
                    this.endMore = true
                    return
                }
                this.num = this.num+1
                if ((this.num-1) * this.size <= this.total) {
                    axios.get('/api/index.php?g=Api&m=Guanwang&a=gonggao&page='+ this.num +'&size=' + this.size +'').then((res) => {
                        let data = res.data.list
                        if (!data.length) {
                            this.hasMore = true
                        }
                        this.hotspotList = this.hotspotList.concat(data)
                    })
                } else {
                    this.hasMore = true
                    this.endMore = true
                } 
            }
        },
        components: {mTitle,Scroll,Loading,Search},
        created () {
            this.getHotSpotInfo()
        }
    }
</script>

<style lang="stylus" scoped>
    .notice
        width: 100%
        height: 100%
        position: relative
        overflow: hidden
        background: #fff
        .search
            width: 100%
            height: 44px
            background: #efeff4
            padding: 0 15px
            box-sizing: border-box
            -webkit-box-sizing: border-box
            position: relative
            overflow: hidden
            .searchInput
                width: 100%
                height: 32px
                background: #fff
                margin-top: 6px
                border: none
                border-radius: 0
                padding: 0 10px
                box-sizing: border-box
                -webkit-box-sizing: border-box
            .search-icon
                position: absolute
                background: url('./search-icon.png') no-repeat
                width: 13px
                height: 13px
                background-size: 100% 100%
                top: 16px
                left: 50%
                margin-left: -15px
            .searchPlaceHolder
                font-size: 14px
                color: #979797
                position: absolute
                top: 17px
                left: 51%
        .notice-wrapper
            position: absolute
            overflow: hidden
            top: 86px
            left: 0
            right: 0
            bottom: 54px
            box-sizing: border-box
            width: 100%
            .loading-wrapper
                position: absolute
                width: 100%
                top: 50%
                -webkit-transform: translateY(-50%)
                transform: tr
            .notice-item
                width: 100%
                padding: 0 15px
                box-sizing: border-box
                -webkit-box-sizing: border-box
                li
                    width: 100%
                    padding-bottom: 10px
                    border-bottom: 1px solid #f2f2f2
                    display: flex
                    padding-top: 10px
                    box-sizing: border-box
                    align-items: center
                    &.bottom-text
                        width: 100%
                        height: 40px
                        line-height: 40px
                        font-size: 14px
                        text-align: center
                        color: #ddd
                        justify-content: center
                        padding: 0
                        border-bottom: none
                    .left
                        width: 125px
                        flex: 0 0 125px
                        height: 95px
                        img
                            width: 100%
                            height: 100%
                    .right
                        flex: 1
                        margin-left: 14px
                        position: relative
                        h3
                            font-size: 14px
                            font-weight: 700
                            line-height: 140%
                            color: #000
                        .notice-date
                            display: block
                            color: #888
                            font-size: 12px
                            margin-top: 6px
                        .notice-desc
                            color: #888
                            font-size: 12px
                            margin-top: 6px
                            line-height: 150%
        .notice-fixed
            position: fixed
            bottom: 0
            height: 54px
            left: 0
            width: 100%
            background: #fff
            box-sizing: border-box
            padding: 0 15px
            display: flex
            align-items: center
            border-top: 1px solid rgba(7,17,27,.1)
            .notice-fixed-item
                flex: 1
                overflow: hidden
                &.active
                    .icon-item1
                        background: url('./news-icon1-active.png') no-repeat
                        background-size: 100% 100%
                    .desc
                        color: #0094d4
                    .icon-item2
                        background: url('./news-icon2-active.png') no-repeat
                        background-size: 100% 100%
                    .desc
                        color: #0094d4
                .icon-item1
                    background: url('./news-icon1.png') no-repeat
                    width: 20px
                    height: 20px
                    background-size: 100% 100%
                    display: block
                    margin: 0 auto
                .desc
                    color: #a1a1a1
                    text-align: center
                    font-size: 12px
                    display: block
                    margin-top: 4px
                .icon-item2
                    background: url('./news-icon2.png') no-repeat
                    width: 21px
                    height: 20px
                    background-size: 100% 100%
                    display: block
                    margin: 0 auto
                .desc
                    color: #a1a1a1
                    text-align: center
                    font-size: 12px
                    display: block
                    margin-top: 4px
</style>